<template>
    <div>
        <div style="margin-left: 50px; margin-right: 50px;margin-top: 20px">
            <img class="u1" src="https://help.ifeng.com/datas/feedback/20220820/62ffbd3bee576.jpg" >
        </div>

        <n-divider/>

        <div style="margin-left: 50px; margin-right: 50px;margin-top: 20px">
            <h2>修改资料</h2>
            <a-row>
                <a-col :span="18" :push="6">
                    <a-form
                            ref="formRef"
                            :model="formState"
                            :rules="rules"
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol"
                    >
                        <a-form-item ref="name" label="用户名" name="name">
                            <a-input v-model:value="formState.name" />
                        </a-form-item>
                        <a-form-item ref="password" label="新密码" name="name">
                            <a-input v-model:value="formState.name" />
                        </a-form-item>
                        <a-form-item ref="name" label="重复密码" name="name">
                            <a-input v-model:value="formState.name" />
                        </a-form-item>
                        <a-form-item ref="name" label="QQ号" name="name">
                            <a-input v-model:value="formState.name" />
                        </a-form-item>
                        <a-form-item label="你的生日" required name="date1">
                            <a-date-picker
                                    v-model:value="formState.date1"
                                    show-time
                                    type="date"
                                    placeholder="Pick a date"
                                    style="width: 100%"
                            />
                        </a-form-item>


                        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                            <a-button type="primary" @click="onSubmit">确认</a-button>
                            <a-button style="margin-left: 10px" @click="resetForm">取消</a-button>
                        </a-form-item>
                    </a-form>
                </a-col>
                <a-col :span="6" :pull="18">
                    <a-collapse v-model:activeKey="activeKey" accordion>
                        <a-collapse-panel key="1" header="This is panel header 1">
                            <p>{{ text }}</p>
                        </a-collapse-panel>
                        <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
                            <p>{{ text }}</p>
                        </a-collapse-panel>
                        <a-collapse-panel key="3" header="This is panel header 3">
                            <p>{{ text }}</p>
                        </a-collapse-panel>
                    </a-collapse>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script lang="ts">
    import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
    import { Moment } from 'moment';
    import { defineComponent, reactive, ref, toRaw, UnwrapRef } from 'vue';
    interface FormState {
        name: string;
        region: string | undefined;
        date1: Moment | undefined;
        delivery: boolean;
        type: string[];
        resource: string;
        desc: string;
    }
    export default defineComponent({
        setup() {
            const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
            const formRef = ref();
            const formState: UnwrapRef<FormState> = reactive({
                name: '',
                region: undefined,
                date1: undefined,
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            });
            const rules = {
                name: [
                    { required: true, message: '请输入你的昵称', trigger: 'blur' },
                    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
                ],
                region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
                date1: [{ required: true, message: 'Please pick a date', trigger: 'change', type: 'object' }],
                type: [
                    {
                        type: 'array',
                        required: true,
                        message: 'Please select at least one activity type',
                        trigger: 'change',
                    },
                ],
                resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
                desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
            };
            const onSubmit = () => {
                formRef.value
                    .validate()
                    .then(() => {
                        console.log('values', formState, toRaw(formState));
                    })
                    .catch((error: ValidateErrorEntity<FormState>) => {
                        console.log('error', error);
                    });
            };
            const resetForm = () => {
                formRef.value.resetFields();
            };
            return {

                formRef,
                labelCol: { span: 4 },
                wrapperCol: { span: 14 },
                other: '',
                formState,
                rules,
                onSubmit,
                resetForm,
                text
            };
        },
    });
</script>

<style>
    .u1{
        width: 100%;
        height: 400px;
        object-fit: cover;
    }
</style>

